<template>
  <div class="contact-form">
    <form @submit.prevent="handleSubmit" class="form-container">
      <div class="form-row">
        <div class="form-group">
          <label for="customerName" class="form-label">客户姓名 *</label>
          <input id="customerName" v-model="formData.customerName" type="text" class="form-input" placeholder="请输入您的姓名" required />
        </div>

        <div class="form-group">
          <label for="telephone" class="form-label">联系电话 *</label>
          <input id="telephone" v-model="formData.telephone" type="tel" class="form-input" placeholder="请输入您的联系电话" required />
        </div>
      </div>

      <div class="form-row">
        <div class="form-group">
          <label for="productionName" class="form-label">产品名称 *</label>
          <input id="productionName" v-model="formData.productionName" type="text" class="form-input" placeholder="请输入产品名称" required />
        </div>

        <div class="form-group">
          <label for="email" class="form-label">邮箱</label>
          <input id="email" v-model="formData.email" type="email" class="form-input" placeholder="请输入您的邮箱地址" />
        </div>
      </div>

      <div class="form-group">
        <label for="corporation" class="form-label">单位名称</label>
        <input id="corporation" v-model="formData.corporation" type="text" class="form-input" placeholder="请输入您的单位名称" />
      </div>

      <div class="form-group">
        <label for="content" class="form-label">留言内容</label>
        <textarea id="content" v-model="formData.content" class="form-textarea" placeholder="请输入您的留言内容" rows="4"></textarea>
      </div>

      <div class="form-actions">
        <button type="submit" class="submit-btn" :disabled="isSubmitting">
          {{ isSubmitting ? "提交中..." : "立即咨询" }}
        </button>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { doConsult } from "@/api/projects";

// 定义props，接收产品名称作为默认值
const props = defineProps({
  productionName: {
    type: String,
    default: ""
  }
});

// 表单数据
const formData = reactive({
  customerName: "",
  telephone: "",
  productionName: "",
  email: "",
  corporation: "",
  content: "",
  productionId: ""
});

// 提交状态
const isSubmitting = ref(false);

// 初始化表单数据
onMounted(() => {
  if (props.productionName) {
    formData.productionName = props.productionName;
  }
});

/**
 * 处理表单提交
 * 验证必填字段并调用API提交数据
 */
const handleSubmit = async () => {
  // 验证必填字段
  if (!formData.customerName.trim()) {
    alert("请输入客户姓名");
    return;
  }

  if (!formData.telephone.trim()) {
    alert("请输入联系电话");
    return;
  }

  if (!formData.productionName.trim()) {
    alert("请输入产品名称");
    return;
  }

  try {
    isSubmitting.value = true;

    // 调用API提交数据
    await doConsult(formData);

    alert("咨询提交成功，我们会尽快与您联系！");

    // 重置表单
    resetForm();
  } catch (error) {
    console.error("提交咨询失败:", error);
    alert("提交失败，请稍后重试");
  } finally {
    isSubmitting.value = false;
  }
};

/**
 * 重置表单数据
 * 清空所有表单字段，保留props传入的产品名称
 */
const resetForm = () => {
  formData.customerName = "";
  formData.telephone = "";
  formData.productionName = props.productionName || "";
  formData.email = "";
  formData.corporation = "";
  formData.content = "";
  formData.productionId = "";
};
</script>

<style lang="scss" scoped>
.contact-form {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.form-container {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 0;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background-color: white;

  &:focus {
    outline: none;
    border-color: $custom-primary;
    box-shadow: 0 0 0 3px rgba(249, 117, 22, 0.1);
  }

  &::placeholder {
    color: #9ca3af;
  }

  &:hover {
    border-color: #d1d5db;
  }
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.form-actions {
  margin-top: 2rem;
  text-align: center;
}

.submit-btn {
  background: linear-gradient(135deg, $custom-primary, $custom-secondary);
  color: white;
  border: none;
  padding: 0.875rem 2rem;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 140px;

  &:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(249, 117, 22, 0.3);
  }

  &:active:not(:disabled) {
    transform: translateY(0);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .form-container {
    padding: 1.5rem;
    margin: 0 1rem;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .form-group {
    margin-bottom: 1rem;
  }

  .form-input,
  .form-textarea {
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
  }

  .submit-btn {
    width: 100%;
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .form-container {
    padding: 1rem;
  }
}
</style>
